<template>
	<div class="navigation">
		<div class="menu-box">
			<div class="menu" :class="{active: $store.state.currentTab === 0}" @click="$router.push('/home')">首页</div>
			<div class="menu" :class="{active: $store.state.currentTab === 1}" @click="$router.push('/game')">收藏家地图</div>
			<div class="menu" :class="{active: $store.state.currentTab === 2}" @click="$router.push('/code')">代码</div>
			<div class="menu" :class="{active: $store.state.currentTab === 3}" @click="$router.push('/tools')">工具</div>
		</div>
		<div v-if="$store.state.userinfo.uid" class="login-box" @mouseenter="dropItem('avatar',true)"  @mouseleave="dropItem('avatar',false)">
			<div class="avatar" :class="{avatarSlide: inAvatar || inDrop }" :style="'background-image:url(\''+ ($store.state.userinfo.avatar.slice(0,4) === 'http' ? '' : config.imgPath) + $store.state.userinfo.avatar +'\')'"></div>
			<transition name="fade">
				<div class="login-drop" v-show="inAvatar || inDrop"  @mouseenter="dropItem('drop',true)" @mouseleave="dropItem('drop',false)">
					<ul class="drop-box">
						<li class="nickname">{{$store.state.userinfo.nickname}}</li>
						<li class="drop-item"><i class="iconfont">&#xe603;</i> 个人中心</li>
						<li class="divider-line"></li>
						<li class="drop-item" @click="logout"><i class="iconfont">&#xe612;</i> 退出登录</li>
					</ul>
				</div>
			</transition>
		</div>
		<div v-else class="login-box" style="color:#efefef;cursor: pointer" @click="$router.push('/login')">
			<span>登录</span>
		</div>
	</div>
</template>
<script setup>
import { ref } from 'vue';
import router from "../router";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import request from "../utils/request";
import Methods from "../utils/Methods";
const store = useStore()
const route = useRoute()
const inAvatar = ref(false)
const inDrop = ref(false)
const dropItem = (type,bool) => {
	if(type === 'avatar') {
		inAvatar.value = bool
	}else {
		inDrop.value = bool
	}
}
store.commit("setUserinfo");

let token = route.query.token

if(token) {
	Methods.setLocalStorage("token",token)
	request.post('user/userInfo',{login:'login'}).then(res => {
		Methods.setLocalStorage('uid',res.data.id)
		Methods.setLocalStorage('nickname',res.data.nickname)
		Methods.setLocalStorage('avatar',res.data.avatar)
		Methods.setLocalStorage('last_refresh_time',new Date().getTime()/1000)
		store.commit("setUserinfo");
	}).catch(err => {
		console.log(err)
	})
}

const logout = () => {
	store.commit('clearAlive')
	Methods.clearLocalStorage()
	router.push('/login')
}
</script>
<style scoped lang="scss">
@import "../assets/aliiconfont/iconfont.css";
.fade-enter-active, .fade-leave-active {
	transition: opacity 0.2s;
}
.fade-enter-from, .fade-leave-to {
	opacity: 0;
}
.navigation {
	height: 66px;
	width: 100%;
	position: fixed;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	z-index: 10;
	background-color: rgba(17, 17, 17, 0.75);
	box-shadow: 0 3px 7px 0 rgb(0 0 0 / 35%);
	.menu-box {
		display: flex;
		.menu {
			font-size: 17px;
			color: #ccc;
			cursor: pointer;
			margin: 0 15px;
			&:hover {
				text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff;
				color: #fff;
			}
		}
		.active {
			text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff;
			color: #fff;
		}
	}
	.login-box {
		width: 66px;
		height: 66px;
		position: fixed;
		z-index: 10;
		right: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
		.avatar {
			width: 44px;
			height: 44px;
			background-color: #2c3e50;
			border-radius: 50%;
			background-position: center center;
			background-size: cover;
			transition: all 0.3s;
		}
		.avatarSlide {
			margin-top: 70px;
			width: 60px;
			height: 60px;
		}
		.login-drop {
			width: 200px;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0 3px 7px 0 rgb(0 0 0 / 35%);
			position: fixed;
			top: 70px;
			right: 83px;
			color: #333333;
			padding: 30px 0 0 0;
			border-radius: 3px;
			z-index: -1;
			.drop-box {
				list-style: none;
				.nickname { justify-content: center }
				.drop-item,.nickname {
					display: flex;
					align-items: center;
					margin: 5px 0;
					height: 50px;
					.iconfont {
						margin: 0 15px;
					}
				}
				.drop-item:hover {
					background-color: rgba(0,0,0,0.1);
				}
				.divider-line {
					height: 0;
					border-bottom: 1px solid rgba(0,0,0,0.1);
				}
			}

		}
	}

}
</style>
